
<style>
	@import "../../../common/css/adminHome.css";
</style>
<template>
	<view class="admin_common_page">
		<view class="top_fix">
			<view class="search_info">
				<image class="search_icon" src="../../../static/search.png" mode="aspectFill"></image>
				<input class="search_input" type="text" placeholder="搜索" />
			</view>
			<view class="business_list">
				<view class="business_list_title">
					<view class="business_list_title_name">商家列表</view>
					<view class="business_list_title_down" v-if="cgSwiperShowFlag" @click="showSwiper">
						<text class="business_list_title_down_name">展开</text>
						<image class="business_list_title_down_img" src="../../../static/down3.png" mode="aspectFill"></image>						
					</view>
					<view class="business_list_title_down" v-if="!cgSwiperShowFlag" @click="hideSwiper">
						<text class="business_list_title_down_name">收起</text>
						<image class="business_list_title_down_img" src="../../../static/up3.png" mode="aspectFill"></image>						
					</view>
				</view>
				<cg-swiper 
				:swiperHeight="cgSwiperHeight" 
				:cgSwiperOpacity="cgSwiperOpacity" 
				:swiperList="swiperList" 
				:isShowBorder="isShowBorder" 
				:swiperPage="swiperPage" 
				@clickItem="clickItem" 
				style="width: 100%;float: left;"></cg-swiper>
			</view>
		</view>
		<view class="order-content" @touchmove.stop.prevent>
			<view class="tabs-swiper-content">
				<u-tabs-swiper ref="uTabs" 
				:list="dataList" 
				:current="current" 
				@change="tabsChange" 
				:is-scroll="false" 
				swiperWidth="750"
				:bgColor="tabColor"
				:inactiveColor="inactiveColor"
				:activeColor="activeColor">
				</u-tabs-swiper>
			</view>
			<!-- <swiper class="swipers" :style="{height:listSwiperHeight + 'rpx'}" :current="swiperCurrent"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in dataList" :key="index">
					<scroll-tab-swiper-item :tabIndex="index" :currentIndex="swiperCurrent" @backOrder="backOrder"></scroll-tab-swiper-item>
				</swiper-item>
			</swiper> -->
			<swiper class="swipers" :style="{height: listSwiperHeight}" :current="swiperCurrent"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in dataList" :key="index">
					<scroll-tab-swiper-item :tabIndex="index" :currentIndex="swiperCurrent" @backOrder="backOrder"></scroll-tab-swiper-item>
				</swiper-item>
			</swiper>
		</view>
		<backOrder v-if="isShowBackOrder" :orderSn="backOrderSn" @cancelBackOrder="cancelBackOrder" @submitBackOrder="submitBackOrder"></backOrder>
		<createShop v-if="isShowAddShop" @cancelAddShop="cancelAddShop" @submitAddShop="submitAddShop"></createShop>
		<tabBarAdmin :pagePath="'/pages/admin/home/home'"></tabBarAdmin>
	</view>
</template>

<script>
	import cgSwiper from '@/components/cg-swiper/cg-swiper.vue';
	import backOrder from '@/components/show-model/show-backOrder/back-order.vue'
	import createShop from '@/components/show-model/show-createShop/create-shop.vue'
	export default {
		components:{
		    cgSwiper,backOrder,createShop
		},
		data() {
			return {
				swiperList:[{"id":-1,"text":"添加店铺","img":"../../static/add_business.png"},{
					id: 77,
					text: "区跑团购店",
					img: "../../static/tuangou.gif",
					
				}],
				swiperPage:0,
				cgSwiperHeight:0,
				cgSwiperOpacity:1,
				listSwiperHeight:0,
				cgSwiperShowFlag:false,
				dataList: [{
					name: '待抢单'
				}, {
					name: '配送中'
				}, {
					name: '已完成'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabColor:"#F5F5F5",
				inactiveColor:"#999999",
				activeColor:"#191B1E",
				isShowBorder:false,
				isShowAddShop:false,
				isShowBackOrder:false,//退单
				backOrderSn:''
			}
		},
		onLoad:function() {
			this.initSwiperData();
		},
		onShow(){
			this.$api.adminAct.getAdminStatus()
			.then(res => {
				if(res.code == 200){
					if(res.data.length <= 0){
						this.$uniNavigateTo('../../pages/my/applyVip/applyVip/applyVip');
					}
				}else{
					this.$commonJs.showToast.showNoneToast(res.msg)
				}
			})
			.catch(err => {
				this.$commonJs.showToast.showNoneToast(err)
			})
		},
		computed:{
			 
		},
		methods: { 
			showSwiper(){
				this.cgSwiperShowFlag = false
				if(this.swiperList.length <= 3){
					this.cgSwiperHeight = 200
					this.cgSwiperOpacity = 1
					this.listSwiperHeight = 'calc( 100vh - 598rpx )'
				}else{
					this.cgSwiperHeight = 388
					this.cgSwiperOpacity = 1
					this.listSwiperHeight = 'calc( 100vh - 790rpx )'
				}
			},
			hideSwiper(){
				this.cgSwiperShowFlag = true
				this.cgSwiperHeight = 0
				this.cgSwiperOpacity = 0
				this.listSwiperHeight = 'calc( 100vh - 402rpx )'
			},
			initSwiperData(){
				let that = this
				this.$api.adminStore.adminStoreList()
				.then(res=>{
					console.log(res)
					if(res.code == 200){
						res.data.map((item,index)=>{
							let json_push	=	{id:item.shopId,text:item.shopName,img:item.shopPic,status:item.status}
							this.swiperList.push(
								Object.assign(json_push)
							)
						})
						this.$store.dispatch('setStoreList',that.swiperList)
						that.swiperPage	=	this.$store.getters.getStorePage
						if(that.swiperList.length <= 3){
							that.cgSwiperHeight = 200
							that.listSwiperHeight = 'calc( 100vh - 598rpx )'
						}else{
							that.cgSwiperHeight = 388
							that.listSwiperHeight = 'calc( 100vh - 790rpx )'
						}
					}
				})
				.catch(err=>{
					this.$commonJs.showToast.showNoneToast(err)
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let that = this
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
			},
			backOrder(e){
				let that = this
				that.backOrderSn = e.orderNo
				that.isShowBackOrder = true
			},
			clickItem(e){
				let that = this
				console.log(e)
				//添加商铺
				if(e.id == -1){
					that.isShowAddShop = true
				}else{
					this.$uniNavigateTo('/pages/admin/store/store?store_id='+e.id + '&title='+ e.text + '&img=' + e.img + '&status=' + e.status)
				}
			},
			cancelBackOrder(){
				let that = this
				that.isShowBackOrder = false
				that.backOrderSn = ''
			},
			submitBackOrder(e){
				console.log(e)
				let that = this
				let postData = {backOrderText:e.backOrderText,orderNo:e.orderNo}
				this.$api.order.backOrder(postData)
				.then(res => {
					if(res.code == 200){
						uni.showLoading({
							title: "退单成功请刷新"
						})
						setTimeout(function () {
							uni.hideLoading()
							that.isShowBackOrder = false
							that.queryList(1,10)
						},2000)
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			},
			cancelAddShop(){
				this.isShowAddShop = false
			},
			submitAddShop(e){
				let that = this
				let postData 	=	{latitude:e.latitude,longitude:e.lontitude,shopName:e.store_name,shopPic:e.shop_src}
				this.$api.adminStore.addAdminStore(postData)
				.then(res=>{
					if(res.code == 200){
						 //更新展示店铺列表
						let push_data = {id:res.data,text:e.store_name,img:e.show_src}
						this.$store.dispatch('pushStoreList',push_data)
						this.$commonJs.showToast.showNoneToast(res.msg)
						that.isShowAddShop = false
						that.swiperList = this.$store.getters.getStoreList
						that.swiperPage = this.$store.getters.getStorePage
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err=>{
					this.$commonJs.showToast.showNoneToast(err)
				})
			}
		}
	}
</script>

<style>

</style>
